<template>
	<view class="home flex-col">
		<DragButton>
			<view style="width: 100%; height: 100%" @click="fkFn">
				<image :src="getImgUrl('fk.png')" style="width: 70rpx; height: 70rpx"></image>
			</view>
		</DragButton>
		<my-status-bar />
		<u-swiper :list="swiperList" height="160" radius="0" indicator circular></u-swiper>
		<view class="p-10">
			<uni-notice-bar class="b-r-8" background-color="rgba(255,255,255)" :speed="30" show-icon single scrollable
				:text="text" />

			<template v-for="(item, index) in appCategoryList" :index="index">
				<applicationItem v-bind="item" :appList="item.appList" class="m-b-0" />
			</template>

			<view class="p-y-10 p-x-20 b-r-10 m-y-10 flex m-between s-center" style="background: #fff">
				<view class="flex s-center f-s-18 fw">矿区安全生产</view>
				<view class="flex s-center">
					<up-count-to bold class="m-r-5" :endVal="tianshu" color="#0052D9" />
					天
				</view>
			</view>

			<!-- 			<view class="p-10  b-r-10 m-y-10 " style="background: #fff;">
				<my-grid :list="list0" :col="4" imgWidth="40%" bgColor="#0003"></my-grid>
			</view> -->

			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1" v-if="hasPermi(['中层以上'])">
					<template #title>
						<view class="content-item-title"><text class="title-txt">采场采剥量</text></view>
					</template>
					<my-grid :list="list" :decimals="2" :col="3"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="2" v-if="hasPermi(['中层以上'])">
					<template #title>
						<view class="content-item-title"><text class="title-txt">地面生产系统生产量</text></view>
					</template>
					<view class="title p-b-10 fw flex">
						<image :src="getImgUrl('index/chejian.png')" mode="widthFix" style="width: 28rpx" />
						一车间
					</view>
					<my-grid :list="list1" :decimals="2" :col="3"></my-grid>
					<view class="title p-y-10 fw flex">
						<image :src="getImgUrl('index/chejian.png')" mode="widthFix" style="width: 28rpx" />
						二车间
					</view>
					<my-grid :list="list2" :decimals="2" :col="3"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="3" v-if="hasPermi(['中层以上'])">
					<template #title>
						<view class="content-item-title"><text class="title-txt">销售量</text></view>
					</template>
					<my-grid :list="list3" :decimals="2" :col="3"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="4">
					<template #title>
						<view class="content-item-title"><text class="title-txt">今日作业票统计</text></view>
					</template>
					<my-grid :list="list4" :col="4" imgWidth="40%"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="5">
					<template #title>
						<view class="content-item-title"><text class="title-txt">当日值班领导</text></view>
					</template>

					<my-scroll style="height: 540rpx">
						<view v-for="(item, i) in list5" :key="i" :class="{ 'm-t-10': i > 0 }"
							class="flex s-center m-between p-10 b-r-10"
							style="background-color: #f5f7fe; border: 1px solid #dce3e8">
							<view style="background-color: #0d79be" class="b-r-10 p-t-5 p-x-5">
								<image :src="getImgUrl(`tx.png`)" mode="widthFix" style="width: 100rpx" class="block" />
							</view>
							<view class="f1 w0 m-l-10">
								<view class="m-b-10">
									<text style="color: #0052d9" class="f-s-20 fw">{{ item.name }}</text>
								</view>
								<view>
									<text style="color: #555d6f" class="m-r-10">{{ item.duty }}</text>
									<text style="color: #555d6f">{{ phoneHide(item.phone) }}</text>
								</view>
							</view>
							<image :src="getImgUrl(`phone.png`)" mode="widthFix" style="width: 80rpx"
								@click="makePhone(item)"></image>
						</view>
					</my-scroll>
				</u-collapse-item>

				<u-collapse-item name="6">
					<template #title>
						<view class="content-item-title"><text class="title-txt">告警统计</text></view>
					</template>

					<view class="flex m-between s-center">
						<u-tabs lineWidth="30" lineColor="#2172FC" :list="[{ name: '日' }, { name: '月' }, { name: '年' }]"
							:activeStyle="{ color: '#2172FC', fontWeight: 'bold' }" @click="fn6"
							itemStyle="width:40px;height:44px" />

						<!-- <up-icon label="详情" name="arrow-rightward" labelPos="left" color="#2172FC" labelColor="#2172FC" @tap="msgFn" /> -->
					</view>

					<my-grid :list="list6" :col="3" imgWidth="30%" class="m-t-10" @click="click"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="7">
					<template #title>
						<view class="content-item-title"><text class="title-txt">当日设备出动情况</text></view>
					</template>
					<my-table :data="tableData" :columns="columns" />
				</u-collapse-item>
			</u-collapse>
		</view>
		<up-back-top :scroll-top="scrollTop"></up-back-top>
	</view>
</template>

<script setup>
	import DragButton from '@/components/dragon-dragButton/index.vue';
	import applicationItem from '../application/application-item.vue';
	import {
		AndroidCheckUpdate
	} from '@/utils/update';
	import checkVersion from '@/utils/checkVersion';
	import {
		Authorized
	} from '@u/msgAuth';
	import {
		getByApiCode,
		appAnnouncement,
		callApiBySuffix
	} from '@/api/customApi';
	import {
		phoneHide
	} from '@u/index';
	import {
		messageQuery
	} from '@/api/message.js';

	/**************************************返回顶部*************************************************/
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	/**************************************基础数据*************************************************/
	const collapse = ref(null),
		showMoreKeys = ref([1, 2, 3, 4, 5, 6, 7]),
		swiperList = ref(['/static/img/index/banner1.png', '/static/img/index/banner2.png',
			'/static/img/index/banner3.png'
		]),
		appCategoryList = [{
			// title: '快捷入口',
			has: ['普通用户'],
			appList: [{
					name: 'HSE',
					path: '/pages/appPages/appPages',
					icon: 'index/hse.svg',
					address: 'https://www.xjnyjtsthgs.com:38087/xjsthhse/web/BCBS04',
					has: ['普通用户']
				},
				{
					name: '设备全生命周期',
					path: '/pages/appPages/appPages',
					icon: 'index/sbsmzq.svg',
					address: 'https://www.xjnyjtsthgs.com:39400',
					has: ['普通用户']
					// address: 'http://172.41.100.237:5174/'
				},
				{
					name: '矿山设计',
					path: '/pages/appPages/appPages',
					icon: 'index/kssj.svg',
					address: 'https://www.xjnyjtsthgs.com:42099/mes-h5/#/views/home/index',
					has: ['中层以上']
				},
				{
					name: '人员定位',
					path: '/pages/appPages/appPages',
					icon: 'index/rydw.svg',
					address: 'https://172.41.90.54:51104/rydwapp/',
					has: ['中层以上']
					// http://218.31.110.43:38803/rydwapp/
				},
				{
					name: '能耗精细化',
					path: '/pages/application/znfz/nhjxh/index',
					icon: 'index/nhjxh.svg',
					has: ['中层以上']
				},
				{
					name: '安全一张图',
					path: '/pages/application/xxjc/aqyzt/index',
					icon: 'work/aqyzt.png',
					has: ['中层以上']
				},
				{
					name: '产运销一张图',
					path: '/pages/application/xxjc/cyx/index',
					icon: 'work/scdd.png',
					has: ['中层以上']
				}
			]
		}];

	/***********************************************app公告*****************************/
	const text = ref('');

	function appAnnouncementFn() {
		appAnnouncement().then((res) => {
			text.value = res.data.data[1][0];
		});
	}
	/**********************************************************************生产天数/天气***********************************/
	let tianshu = ref(0),
		list0 = ref([{
				img: 'index/tq.png',
				key: '天气',
				title: '天气',
				value: ''
			},
			{
				img: 'index/fl.png',
				key: '风力',
				title: '风力',
				value: '0',
				unit: '级'
			},
			{
				img: 'index/fx.png',
				key: '风向',
				title: '风向',
				value: ''
			},
			{
				img: 'index/zf.png',
				key: '阵风',
				title: '阵风',
				value: '0',
				unit: '级'
			}
		]);

	function fn0() {
		getByApiCode({
			apiCode: 'zhuyemiantianqi',
			propertyMapping: {
				key: 's',
				val: 'y'
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list0.value.forEach((item) => {
				item.value = data[item.key];
			});
		});

		getByApiCode({
			apiCode: 'anQuanShengChanTianShu',
			propertyMapping: {
				tianshu: 'tianshu'
			}
		}).then((res) => {
			tianshu.value = res.data[0].tianshu || 0;
		});
	}

	/**********************************************************************采场采剥量***********************************/
	let list = ref([{
			key: '日采煤',
			title: '日采煤量',
			value: '0',
			unit: '万吨'
		},
		{
			key: '月采煤',
			title: '月采煤量',
			value: '0',
			unit: '万m³'
		},
		{
			key: '年采煤',
			title: '年采煤量',
			value: '0',
			unit: '万吨'
		},
		{
			key: '日剥离',
			title: '日剥离量',
			value: '0',
			unit: '万吨'
		},
		{
			key: '月剥离',
			title: '月剥离量',
			value: '0',
			unit: '万吨'
		},
		{
			key: '年剥离',
			title: '年剥离量',
			value: '0',
			unit: '万吨'
		}
	]);
	// 生产情况
	function fn1() {
		getByApiCode({
			apiCode: 'caichangcaiboliang',
			propertyMapping: {
				key: 's',
				val: 'y'
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list.value.forEach((item) => {
				item.value = data[item.key] || 0;
			});
		});
	}
	/**********************************************************************地面生产系统生产量***********************************/
	let list1 = ref([{
				key: '一车间日生产',
				title: '日生产',
				value: '0',
				unit: '万吨'
			},
			{
				key: '一车间月生产',
				title: '月生产',
				value: '0',
				unit: '万吨'
			},
			{
				key: '一车间年生产',
				title: '年生产',
				value: '0',
				unit: '万吨'
			}
		]),
		list2 = ref([{
				key: '二车间日生产',
				title: '日生产',
				value: '0',
				unit: '万吨'
			},
			{
				key: '二车间月生产',
				title: '月生产',
				value: '0',
				unit: '万吨'
			},
			{
				key: '二车间年生产',
				title: '年生产',
				value: '0',
				unit: '万吨'
			}
		]);

	function fn2() {
		getByApiCode({
			apiCode: 'dimianshengchanxitongshengchanliang',
			propertyMapping: {
				key: 's',
				val: 'y'
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list1.value.forEach((item) => {
				item.value = data[item.key] || 0;
			});
		});
		getByApiCode({
			apiCode: 'shengchanliangerchejiantongji',
			propertyMapping: {
				key: 's',
				val: 'y'
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list2.value.forEach((item) => {
				item.value = data[item.key] || 0;
			});
		});
	}
	/**********************************************************************销售量***********************************/

	let list3 = ref([{
			img: 'index/rxs.png',
			key: '日销售',
			title: '日销售',
			value: '0',
			unit: '万吨'
		},
		{
			img: 'index/yxs.png',
			key: '月销售',
			title: '月销售',
			value: '0',
			unit: '万吨'
		},
		{
			img: 'index/nxs.png',
			key: '年销售',
			title: '年销售',
			value: '0',
			unit: '万吨'
		}
	]);

	function fn3() {
		getByApiCode({
			apiCode: 'xiaoshouliang',
			propertyMapping: {
				key: 's',
				val: 'y'
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list3.value.forEach((item) => {
				item.value = data[item.key] || 0;
			});
		});
	}

	/**********************************************************************今日作业票统计***********************************/
	let list4 = ref([{
			img: 'index/dh.png',
			key: '动火',
			title: '动火',
			value: '0',
			unit: '个'
		},
		{
			img: 'index/sx.png',
			key: '受限',
			title: '受限',
			value: '0',
			unit: '个'
		},
		{
			img: 'index/mb.png',
			key: '盲板',
			title: '盲板',
			value: '0',
			unit: '个'
		},
		{
			img: 'index/dz.png',
			key: '吊装',
			title: '吊装',
			value: '0',
			unit: '个'
		},
		{
			img: 'index/ld.png',
			key: '临电',
			title: '临电',
			value: '0',
			unit: '个'
		},
		{
			img: 'index/dt.png',
			key: '动土',
			title: '动土',
			value: '0',
			unit: '个'
		},
		{
			img: 'index/gc.png',
			key: '高处',
			title: '高处',
			value: '0',
			unit: '个'
		},
		{
			img: 'index/dl.png',
			key: '断路',
			title: '断路',
			value: '0',
			unit: '个'
		}
	]);

	function fn4() {
		getByApiCode({
			apiCode: 'jobfenleitongji',
			propertyMapping: {
				key: 'name',
				val: 'val'
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list4.value.forEach((item) => {
				item.value = data[item.key] || 0;
			});
		});
	}

	/****************************************当日值班信息****************************/
	let list5 = ref([{}, {}, {}]);

	function fn5() {
		getByApiCode({
			apiCode: 'dangrizhibanxinxi',
			propertyMapping: {
				duty: 'typename',
				name: 'name',
				phone: 'phone'
			}
		}).then((res) => {
			list5.value = res.data;
		});
	}

	function makePhone(item) {
		// #ifdef APP-PLUS
		plus.device.dial(item.phone, true);
		//#endif

		// #ifdef H5
		uni.makePhoneCall({
			phoneNumber: item.phone
		});
		//#endif
	}

	/****************************************告警统计****************************/
	let list6 = ref([{
			img: 'index/wcl.png',
			key: '未处理',
			title: '未处理',
			value: '0',
			unit: '条'
		},
		{
			img: 'index/zs.png',
			key: '处理中',
			title: '处理中',
			value: '0',
			unit: '条'
		},
		{
			img: 'index/ycl.png',
			key: '已处理',
			title: '已处理',
			value: '0',
			unit: '条'
		}
	]);

	const apiCode = ['jinrigaojingtongji', 'yuegaojingrongji', 'niangaojingtongji'];

	function fn6({
		index = 0,
		name = '日'
	} = {}) {
		getByApiCode({
			apiCode: apiCode[index],
			propertyMapping: {
				key: 'name',
				val: 'val'
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list6.value.forEach((item) => {
				item.value = data[item.key];
			});
		});
	}

	const click = (name) => {
		if (name.title == '未处理') {
			uni.$store.user.current = 0;
		} else if (name.title == '处理中') {
			uni.$store.user.current = 1;
		} else {
			uni.$store.user.current = 2;
		}
		uni.switchTab({
			url: '/pages/message/index'
		});
	};

	/****************************************告警统计****************************/
	let columns = ref([{
				label: '设备类型',
				prop: '设备类型',
				width: 80
			},
			{
				label: '总数',
				prop: '总数',
				width: 60
			},
			{
				label: '使用数',
				prop: '使用数',
				width: 70
			},
			{
				label: '待机数',
				prop: '待机数',
				width: 70
			},
			{
				label: '出动率',
				prop: '出动率',
				width: 70,
				formatter: (row, column, val, $index) => `${val}%`
			}
		]),
		tableData = ref([]);

	function fn7() {
		getByApiCode({
			apiCode: 'jinrishebeichudongqingkuang',
			propertyMapping: {
				设备类型: 'device_type',
				总数: 'total_count',
				使用数: 'daily_count',
				待机数: 'not_deployed',
				出动率: 'deployment_rate'
			}
		}).then((res) => {
			tableData.value = res.data;
			nextTick(() => {
				collapse.value.init();
			});
		});
	}

	function getServerData(refresh) {
		Promise.all([appAnnouncementFn(), fn0(), fn1(), fn2(), fn3(), fn5(), fn6(), fn7()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh();
				});
			}
			setTimeout(() => {
				collapse.value?.init();
			}, 400);
		});
	}

	function pushMsg() {
		uni.navigateTo({
			url: '/pages/index/msg'
		});
	}

	function fkFn() {
		uni.navigateTo({
			url: '/pages/my/insert'
		});
	}

	onShow(() => {
		getServerData();
		userReporting();
	});

	onLoad(() => {
		// #ifdef APP
		checkVersion();
		// Authorized();
		// #endif
	});

	onPullDownRefresh(() => {
		getServerData(true);
	});

	// 用户信息是否完善
	const userInfo = uni.getStorageSync('userInfo');

	function userReporting() {
		messageQuery({
			queryJson: JSON.stringify({
				dataSource: {
					name: '264341879738138624',
					type: 'table'
				},
				rowCount: 100,
				offset: 0,
				filter: {
					type: 'and',
					fields: [{
						column: '264704428203638784',
						type: 'contains',
						value: userInfo.userId
					}]
				}
			}),
			viewId: '264341879750721536'
		}).then((res) => {
			if (res.data.count == 0) {
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/insert',
						fail: (res) => {
							console.log(res) //打印错误信息
						}
					});
				}, 300)
			}
		});
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	// .title {
	// 	font-size: 28rpx;
	// 	color: #8f8f94;
	// }

	.leader-list {
		margin-top: -20rpx;

		.leader-list-item {
			background: #f5f7fe;
			margin-top: 12rpx;
			height: 125rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				.post {
					color: #555d6f;
				}

				.name {
					color: #0052d9;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.right {
				margin-right: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.line-progress {
		text-align: left;
		line-height: 60rpx;
		font-size: 15px;
		padding: 5rpx;
	}

	.list_left {
		text-align: left;
		margin: 5rpx;
		font-size: 14px;
	}

	.list_conten {
		color: #2472f1;
		margin: 0rpx 5rpx;
	}

	.list_right {
		float: right;
	}

	.grid {
		.unit {
			font-size: 24rpx;
			color: #828893;
			margin-left: 8rpx;
			float: right;
		}
	}

	.u-border-bottom {
		border-bottom-width: 10rpx !important;
		border-color: #fff !important;
		border-bottom-style: solid;
	}

	.u-border-right {
		border-right-width: 10rpx !important;
		border-color: #fff !important;
		border-right-style: solid;
	}

	.grid_box {
		height: 100rpx;
		line-height: 100rpx;
	}

	.grid_left {
		float: left;
		margin-right: 50rpx;
		display: flex;
	}

	.grid_conten {
		color: #2472f1;
		float: right;
	}

	.charts_box {
		height: 500rpx;
	}
</style>